<!DOCTYPE html>
<html class="has-navbar-fixed-top">
	<head>
		<meta charset="utf-8">
		<title>不能放在子页面代码</title>
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css"/>
		<link rel="stylesheet" type="text/css" href="./public/ydc_css.css"/>
	</head>
	<body>
		<div class="header_ydc"></div>
		<!-- 菜单导航 -->
		<div class="box">
			<aside class="menu">
				<p class="menu-label mb-0 content is-medium" onclick="$('.menu-day1').toggle()">图片问题</p>
				<ol class="menu-list menu-day1 pl-4" style="display: none;">
					<li><a href="#child1" class="p-0">懒加载--html瀑布流</a></li>
				</ol>
			</aside>
		</div>
		<!-- 懒加载——html瀑布流 -->
		<div class="box" id="child1">
			<h4 class="mb-4">1.懒加载——html瀑布流 <div class="button is-small"  onclick="$('.menu-content1').toggle()">点击显示详情</div></h4>
			<div class="content ml-2 menu-content1" style="display: none;">
				<p class="mb-0">① 一行几排：column-count: 5;</p>
				<p class="mb-0">② 一行间隔：column-gap: 0;</p>
				<p class="mb-0">③ 递增一个或多个计数器值(当前第几个)：counter-increment:名称;</p>
				<p>④ 设定计数器：counter(名称);</p>
			</div>
			<div class="list_pubu">
				<div class="item">
					<img data-src="https://picsum.photos/360/460?random=1"
						src="https://img.zcool.cn/community/01f4055864c2c3a8012060c8dc7eca.gif" alt="加载中">
				</div>
				<div class="item">
					<img data-src="https://picsum.photos/400/460?random=2"
						src="https://img.zcool.cn/community/01f4055864c2c3a8012060c8dc7eca.gif" alt="加载中">
				</div>
				<div class="item">
					<img data-src="https://picsum.photos/370/450?random=3"
						src="https://img.zcool.cn/community/01f4055864c2c3a8012060c8dc7eca.gif" alt="加载中">
				</div>
				<div class="item">
					<img data-src="https://picsum.photos/370/460?random=4"
						src="https://img.zcool.cn/community/01f4055864c2c3a8012060c8dc7eca.gif" alt="加载中">
				</div>
				<div class="item">
					<img data-src="https://picsum.photos/390/410?random=5"
						src="https://img.zcool.cn/community/01f4055864c2c3a8012060c8dc7eca.gif" alt="加载中">
				</div>
				<div class="item">
					<img data-src="https://picsum.photos/380/440?random=6"
						src="https://img.zcool.cn/community/01f4055864c2c3a8012060c8dc7eca.gif" alt="加载中">
				</div>
				<div class="item">
					<img data-src="https://picsum.photos/560/560?random=7"
						src="https://img.zcool.cn/community/01f4055864c2c3a8012060c8dc7eca.gif" alt="加载中">
				</div>
				<div class="item">
					<img data-src="https://picsum.photos/460/360?random=8"
						src="https://img.zcool.cn/community/01f4055864c2c3a8012060c8dc7eca.gif" alt="加载中">
				</div>
				<div class="item">
					<img data-src="https://picsum.photos/360/460?random=9"
						src="https://img.zcool.cn/community/01f4055864c2c3a8012060c8dc7eca.gif" alt="加载中">
				</div>
				<div class="item">
					<img data-src="https://picsum.photos/380/490?random=10"
						src="https://img.zcool.cn/community/01f4055864c2c3a8012060c8dc7eca.gif" alt="加载中">
				</div>
				<div class="item">
					<img data-src="https://picsum.photos/300/460?random=11"
						src="https://img.zcool.cn/community/01f4055864c2c3a8012060c8dc7eca.gif" alt="加载中">
				</div>
				<div class="item">
					<img data-src="https://picsum.photos/560/460?random=12"
						src="https://img.zcool.cn/community/01f4055864c2c3a8012060c8dc7eca.gif" alt="加载中">
				</div>
				<div class="item">
					<img data-src="https://picsum.photos/560/460?random=13"
						src="https://img.zcool.cn/community/01f4055864c2c3a8012060c8dc7eca.gif" alt="加载中">
				</div>
				<div class="item">
					<img data-src="https://picsum.photos/560/460?random=14"
						src="https://img.zcool.cn/community/01f4055864c2c3a8012060c8dc7eca.gif" alt="加载中">
				</div>
				<div class="item">
					<img data-src="https://picsum.photos/560/460?random=15"
						src="https://img.zcool.cn/community/01f4055864c2c3a8012060c8dc7eca.gif" alt="加载中">
				</div>
				
			</div>
		</div>
	</body>
	
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- <script src="public/ydc_data.js" type="text/javascript"></script> -->

<script type="text/javascript">
	$(document).ready(function(){
		$('.header_ydc').load('header.html')
		$('.tabsContent_ydc').load('tabsContent_ydc.html')
	})
</script>
<script src="public/json_data.json" type="text/javascript"></script>
<script type="text/javascript">
	// html瀑布--懒加载（解决图片加载慢）
	var list_pubu = document.querySelectorAll('.list_pubu .item img');
	
	// console.log(list_pubu,'kkk');
	document.addEventListener('DOMContentLoaded',function(){
		// 可视高度
		const viewHeight = window.innerWidth || document.documentElement.clientHeight;
		// console.log('可视高度',viewHeight);
		// lazyload()
		function lazyload(){
			for(let i=0;i<list_pubu.length;i++){
				// 每个图片距离顶
				let distance = viewHeight - list_pubu[i].getBoundingClientRect().top;
				// console.log(i,distance);
				
				if(distance >0){
					list_pubu[i].src = list_pubu[i].getAttribute('data-src');
				}
				// console.log(list_pubu[i].src,'图片路径');
			}
		}
		// 滚动加载 -- 节流
		window.addEventListener('scroll',throttle(lazyload,1000),false);
		// 首屏加载
		window.addEventListener('load',lazyload,false);
	},false);
	
	
	// 简易节流
	const throttle = (fn,intervel)=>{
		let last = 0;//上一次触发回调时间
		return function(){
			let now = +new Date();
			if(now - last >= intervel){
				last = now;
				fn()
				console.log('触发');
			}
		}
	}
</script>
